<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小米商城</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2795554_ia1si461gp9.css">
    <link rel="icon" href="../images/logo-mi2.png">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2795554_1agjec0vpaz.css">
    <!-- <link rel="stylesheet" href="../css/swiper-bundle.min.css"> -->
    <!-- <link
      rel="stylesheet"
      href="https://unpkg.com/swiper/swiper-bundle.min.css"
    /> -->
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">

    <style>
        html,
        body {
            position: relative;
            height: 100%;
        }

        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .swiper {
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <div id="header">
        <div class="header-con">
            <ul>
                <li>
                    <a href="">小米商城</a>
                </li>
                <li>
                    <a href="">MIUI</a>
                </li>
                <li>
                    <a href="">IoT</a>
                </li>
                <li>
                    <a href="">云服务</a>
                </li>
                <li>
                    <a href="">天星数科</a>
                </li>
                <li>
                    <a href="">有品</a>
                </li>
                <li>
                    <a href="">小爱开放平台</a>
                </li>
                <li>
                    <a href="">企业团购</a>
                </li>
                <li>
                    <a href="">资质证照</a>
                </li>
                <li>
                    <a href="">协议规则</a>
                </li>
                <li>
                    <a href="">下载app</a>
                </li>
                <li>
                    <a href="">智能生活</a>
                </li>
                <li>
                    <a href="">Select&nbsp;Location</a>
                </li>
                <li class="loginUser">
                    <a href="login.html">登录</a>
                </li>
                <li class="registerUser" style="background: none;">
                    <a href="register.html">注册</a>
                </li>
                <li>
                    <a href="">消息通知</a>
                </li>
                <li class='cartGoods'>
                    <a href="javascript:;">
                        <i class="iconfont icon-gouwuchekong shopping">&nbsp;购物车
                            <span>(<span class='cart'>0</span>)</span>
                        </i>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 头部导航 -->
    <div id="nav">
        <div class="nav-con">
            <a href="">
                <img src="../images/logo-mi2.png" alt="">
            </a>
            <ul>
                <li>
                    <a href="">小米手机</a>
                </li>
                <li>
                    <a href="">Redmi红米</a>
                </li>
                <li>
                    <a href="">电视</a>
                </li>
                <li>
                    <a href="">笔记本</a>
                </li>
                <li>
                    <a href="">平板</a>
                </li>
                <li>
                    <a href="">家电</a>
                </li>
                <li>
                    <a href="">路由器</a>
                </li>
                <li>
                    <a href="">智能硬件</a>
                </li>
                <li>
                    <a href="">服务</a>
                </li>
                <li>
                    <a href="">社区</a>
                </li>
            </ul>
            <section id='like'>
                <input type="text" placeholder="手机">
                <ol></ol>
            </section>
            <input type="text" placeholder="&#xe60b;" class="iconfont" id='find'>
        </div>
    </div>
    <!-- 商品轮播图 -->
    <div id="banner">
        <div class="banner-con">
            <div class="leftBox">
                <ul>
                    <li>
                        <span>手机</span>
                        <i class="iconfont icon-changyong_gengduo"></i>
                    </li>
                    <li>
                        <span>电视</span>
                        <i class="iconfont icon-changyong_gengduo"></i>
                    </li>
                    <li>
                        <span>笔记本&nbsp;平板</span>
                        <i class="iconfont icon-changyong_gengduo"></i>
                    </li>
                    <li>
                        <span>家电</span>
                        <i class="iconfont icon-changyong_gengduo"></i>
                    </li>
                    <li>
                        <span>出行&nbsp;穿戴</span>
                        <i class="iconfont icon-changyong_gengduo"></i>
                    </li>
                    <li>
                        <span>智能&nbsp;路由器</span>
                        <i class="iconfont icon-changyong_gengduo"></i>
                    </li>
                    <li>
                        <span>电源&nbsp;配件</span>
                        <i class="iconfont icon-changyong_gengduo"></i>
                    </li>
                    <li>
                        <span>健康&nbsp;儿童</span>
                        <i class="iconfont icon-changyong_gengduo"></i>
                    </li>
                    <li>
                        <span>耳机&nbsp;音箱</span>
                        <i class="iconfont icon-changyong_gengduo"></i>
                    </li>
                    <li>
                        <span>生活&nbsp;箱包</span>
                        <i class="iconfont icon-changyong_gengduo"></i>
                    </li>
                </ul>
            </div>
            <div class="rightBox">
                <div class="swiper mySwiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="../images/2.jpg" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="../images/8.jpg" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="../images/9.jpg" alt="">
                        </div>
                    </div>
                    <div class="swiper-button-next" style='opacity:0.5;color:#ccc'></div>
                    <div class="swiper-button-prev" style='opacity:0.5;color:#ccc'></div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 小米服务 -->
    <div id="ser">
        <div class="ser-con">
            <div class="leftBox">
                <div class="box1">
                    <i class="iconfont icon-baozhangfuwu"></i>
                    <span>保障服务</span>
                </div>
                <div class="box2">
                    <i class="iconfont icon-qiyetuangou-copy"></i>
                    <span>企业团购</span>
                </div>
                <div class="box3">
                    <i class="iconfont icon-Fmatongdao"></i>
                    <span>F码通道</span>
                </div>
                <div class="box4">
                    <i class="iconfont icon-mifenqia"></i>
                    <span>米粉卡</span>
                </div>
                <div class="box5">
                    <i class="iconfont icon-yijiuhuanxin"></i>
                    <span>以旧换新</span>
                </div>
                <div class="box6">
                    <i class="iconfont icon-huafeichongzhi"></i>
                    <span>话费充值</span>
                </div>
            </div>
            <div class="imgBox1">
                <img src="../images/3.jpg" alt="">
            </div>
            <div class="imgBox2">
                <img src="../images/4.jpg" alt="">
            </div>
            <div class="imgBox3">
                <img src="../images/5.png" alt="">
            </div>
        </div>
    </div>
    <!-- 小米产品图片1 -->
    <div id="pros">
        <div class="pros-con">
            <a href="javascript:;">
                <img src="../images/6.png" alt="">
            </a>
        </div>
    </div>
    <!-- 手机栏 -->
    <div id="phone">
        <div class="phone-con">
            <div class='more'>
                <p>
                    <a href="">手机</a>
                </p>
                <p>
                    <a href="">查看更多</a>
                </p>
                <p>
                    <a href="" class="iconfont icon-changyong_gengduo"></a>
                </p>
            </div>
            <div class="photo">
                <div class="bigPhone">
                    <img src="../images/10.jpg" alt="">
                </div>
                <div class="smallPhone">
                    <div class='check' id="rnp">
                        <img src="" alt="">
                        <h4></h4>
                        <p></p>
                        <span></span>
                    </div>
                    <div class="check" id="rn">
                        <img src="" alt="">
                        <h4></h4>
                        <p></p>
                        <span></span>
                    </div>
                    <div class="check" id="hs">
                        <img src="" alt="">
                        <h4></h4>
                        <p></p>
                        <span></span>
                    </div>
                    <div class="check" id="hsp">
                        <img src="" alt="">
                        <h4></h4>
                        <p></p>
                        <span></span>
                    </div>
                    <div class="check" id="xc">
                        <img src="" alt="">
                        <h4></h4>
                        <p></p>
                        <span></span>
                    </div>
                    <div class="check" id="xm">
                        <img src="" alt="">
                        <h4></h4>
                        <p></p>
                        <span></span>
                    </div>
                    <div class="check" id="RN">
                        <img src="" alt="">
                        <h4></h4>
                        <p></p>
                        <span></span>
                    </div>
                    <div class="check" id="ren">
                        <img src="" alt="">
                        <h4></h4>
                        <p></p>
                        <span></span>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- 家电栏 -->
    <div id="appliance">
        <div class="appliance-con">
            <div class='more'>
                <p>
                    <a href="">家电</a>
                </p>
                <p>
                    <a href="">热门</a>
                </p>
                <p>
                    <a href="">电视影音</a>
                </p>
            </div>
            <div class="appPic">
                <div class='check' id='MO'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class='check' id='xo'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class='check' id='hx
                '>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class='check' id='dh'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class='check' id='zb'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class='check' id='ds'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class='check' id='xb'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class='check' id='zd'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class='check' id='xyj'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div>
                    <div class='check' id='kx'>
                        <img src="" alt="">
                        <h4></h4>
                        <p></p>
                        <span></span>
                    </div>
                    <div class='getMore'>
                        <p>浏览更多</p>
                        <span>热门</span>
                        <i class="iconfont icon-gengduo"></i>
                    </div>
                </div>
            </div>
        </div>

    </div>
    </div>
    <!-- 智能栏 -->
    <div id="smart">
        <div class="smart-con">
            <div class='more'>
                <p>
                    <a href="">智能</a>
                </p>
                <p>
                    <a href="">热门</a>
                </p>
                <p>
                    <a href="">安防</a>
                </p>
                <p>
                    <a href="">出行</a>
                </p>
            </div>
            <div class="smartPro">
                <div class='check' id='MP'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class='check' id='xyx'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class='check' id='lyq'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class='check' id='jsl'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class='check' id='znp'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class='check' id='dty'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class='check' id='zne'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class='check' id='xay'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class='check' id='cl'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div>
                    <div class='check' id='tzc'>
                        <img src="" alt="">
                        <h4></h4>
                        <p></p>
                        <span></span>
                    </div>
                    <div class="getMore">
                        <p>浏览更多</p>
                        <span>热门</span>
                        <i class="iconfont icon-gengduo"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 小米产品图片2 -->
    <div id="prosPhoto">
        <div class="prosPhoto-con">
            <img src="../images/11.jpg" alt="">
        </div>
    </div>
    <!-- 搭配栏 -->
    <div id="equip">
        <div class="equip-con">
            <div class='more'>
                <p>
                    <a href="">搭配</a>
                </p>
                <p>
                    <a href="">热门</a>
                </p>
                <p>
                    <a href="">耳机音箱</a>
                </p>
            </div>
            <div class="equipPro">
                <div class='check' id='phc'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class='check' id='zdj'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class='check' id='dyc'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class='check' id='qps'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class='check' id='mly'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class='check' id='sdp'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class='check' id='qdg'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class='check' id='wxx'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class='check' id='xyg'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div>
                    <div class='check' id='wxt'>
                        <img src="" alt="">
                        <h4></h4>
                        <p></p>
                        <span></span>
                    </div>
                    <div class="getMore">
                        <p>浏览更多</p>
                        <span>热门</span>
                        <i class="iconfont icon-gengduo"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 配件栏 -->
    <div id="parts">
        <div class="parts-con">
            <div class='more'>
                <p>
                    <a href="">配件</a>
                </p>
                <p>
                    <a href="">热门</a>
                </p>
                <p>
                    <a href="">充电器</a>
                </p>
            </div>
            <div class="partsPro">
                <div class="check" id='jsq'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class="check" id='gwc'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class="check" id='xcb'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class="check" id='xcx'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class="check" id='mfz'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class="check" id='dys'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class="check" id='jmq'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class="check" id='jcd'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class="check" id='czc'>
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div>
                    <div class="check" id="wcc">
                        <img src="" alt="">
                        <h4></h4>
                        <p></p>
                        <span></span>
                    </div>
                    <div class="getMore">
                        <p>浏览更多</p>
                        <span>热门</span>
                        <i class="iconfont icon-gengduo"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 周边栏 -->
    <div id="around">
        <div class="around-con">
            <div class='more'>
                <p>
                    <a href="">周边</a>
                </p>
                <p>
                    <a href="">热门</a>
                </p>
                <p>
                    <a href="">出行</a>
                </p>
            </div>
            <div class="aroundPro">
                <div class="check" id="bwb">
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class="check" id="mjs">
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class="check" id="sdj">
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class="check" id="dds">
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class="check" id="tcj">
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class="check" id="xbb">
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class="check" id="fds">
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class="check" id="jyt">
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div class="check" id="txd">
                    <img src="" alt="">
                    <h4></h4>
                    <p></p>
                    <span></span>
                </div>
                <div>
                    <div class="check" id="rcc">
                        <img src="" alt="">
                        <h4></h4>
                        <p></p>
                        <span></span>
                    </div>
                    <div class="getMore">
                        <p>浏览更多</p>
                        <span>热门</span>
                        <i class="iconfont icon-gengduo"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 小米产品图片3 -->
    <div id="ProsPhoto">
        <div class="ProsPhoto-con">
            <img src="../images/12.jpg" alt="">
        </div>
    </div>
    <!-- 视频栏 -->
    <div id="videos">
        <div class="videos-con">
            <div class='more'>
                <p>
                    <a href="">视频</a>
                </p>
                <p>
                    <a href="">查看更多</a>
                </p>
                <p>
                    <a href="" class="iconfont icon-changyong_gengduo"></a>
                </p>
            </div>
            <div class="Video">
                <div>
                    <img src="../images/73.jpg" alt="">
                    <p>2021年春季新品发布会第一场</p>
                </div>
                <div>
                    <img src="../images/74.jpg" alt="">
                    <p>Redmi 10X系列发布会</p>
                    <h4>Redmi 10X系列发布会</h4>
                </div>
                <div>
                    <img src="../images/75.jpg" alt="">
                    <p>小米10 青春版 发布会</p>

                </div>
                <div>
                    <img src="../images/76.jpg" alt="">
                    <p>小米10 8K手机拍大片</p>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部栏 -->
    <div id="footer">
        <div class="footer-con">
            <ul class="ulTop">
                <li>
                    <i class="iconfont icon-weixiufuwu"></i>预约维修服务
                    <span>|</span>
                </li>
                <li>
                    <i class="iconfont icon-tian1"></i>七天无理由退货
                    <span>|</span>
                </li>
                <li>
                    <i class="iconfont icon-tian"></i>十五天免费换货
                    <span>|</span>
                </li>
                <li>
                    <i class="iconfont icon-baoyou"></i>满69包邮
                    <span>|</span>
                </li>
                <li>
                    <i class="iconfont icon-wangdian"></i>520余家售后网点</li>
            </ul>

            <table style="float: left">
                <tr>
                    <td style="padding-left:0">帮助中心</td>
                    <td>服务支持</td>
                    <td>线下门店</td>
                    <td>关于小米</td>
                    <td>关注我们</td>
                    <td>特色服务</td>
                </tr>
                <tr>
                    <td>账户管理</td>
                    <td>售后政策</td>
                    <td>小米之家</td>
                    <td>了解小米</td>
                    <td>新浪微博</td>
                    <td>F码通道</td>
                </tr>
                <tr>
                    <td>购物指南</td>
                    <td>自动服务</td>
                    <td>服务网点</td>
                    <td>加入小米</td>
                    <td>官方微信</td>
                    <td>礼物码</td>
                </tr>
                <tr>
                    <td>订单操作</td>
                    <td>相关下载</td>
                    <td>授权体验店/专区</td>
                    <td>投资者关系</td>
                    <td>联系我们</td>
                    <td>防伪查询</td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>企业社会责任</td>
                    <td>工艺基金会</td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>廉洁举报</td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
            <div class="call">
                <p>400-100-5678</p>
                <p>8:00-18:00(仅收市话费)</p>
                <p>
                    <i class="iconfont icon-xinxi"></i>
                    <span>人工客服</span>
                </p>
                <p>
                    <span>关注小米:</span>
                    <i class="iconfont icon-weibo"></i>
                    <i class="iconfont icon-weixin"></i>
                </p>
            </div>
        </div>
    </div>
    <!-- 版权栏 -->
    <div id="copyright">
        <div class="copy-con">
            <ul>
                <li>小米商城</li>
                <li>MIUI</li>
                <li>米家</li>
                <li>米聊</li>
                <li>多看</li>
                <li>游戏</li>
                <li>政企服务</li>
                <li>小米天猫店</li>
                <li>小米集团隐私政策</li>
                <li>小米公司儿童信息保护规则</li>
                <li>小米商城隐私政策</li>
                <li小米商城用户协议></li>
                    <li>问题反馈</li>
                    <li style="background:none">Select&nbsp;Location</li>
                    <br>
            </ul>
            <ol>
                <li>北京互联网法院法律服务工作站</li>
                <li>中国消费者协会</li>
                <li style="background: none">北京市消费者协会</li>
                <br>
            </ol>
            <p>&copy;mi.com 京ICP证110507号 京ICP备10046444号 京公安安备11010802020134号 京网文[2020]0276-042号</p>
            <p>（京）网城平台备字（2018）第00005号 互联网药品信息服务资格证(京)-非经营性-2014-0090 营业执照 医疗器械质量公告</p>
            <p>增值电信业务许可证 网络食品经营备案 京食药网食备22010048 食品经营许可证</p>
            <p>违法和不良信息举报电话:171-5104-4404 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
            <h4></h4>
            <h3>让全球每个人都能享受科技带来的美好生活</h3>
        </div>
    </div>
    <!-- 固定栏 -->
    <!-- 回到顶部 -->
    <div id="fix">
        <p>
            <i class="iconfont icon-shouji"></i>
        </p>
        <p>
            <i class="iconfont icon-zhanghao"></i>
        </p>
        <p>
            <i class="iconfont icon-weixiufuwu"></i>
        </p>
        <p>
            <i class="iconfont icon-kefu"></i>
        </p>
        <p>
            <i class="iconfont icon-gouwuchekong"></i>
        </p>
        <div id="backTop">
            <i class="iconfont icon-huidaodingbu1"></i>
        </div>
    </div>
</body>

</html>
<!-- 引入swiper轮播插件 -->
<script src="../js/swiper-bundle.min.js"></script>
<script>
    var swiper = new Swiper(".mySwiper", {
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        mousewheel: true,
        autoplay: {
            delay: 1500,
            stopOnLastSlide: false,
            disableOnInteraction: false,
            pauseOnMouseEnter: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
</script>
<!-- 引入jQuery方法库 -->
<script src="../js/ajax.js"></script>
<script src="../js/jquery-3.6.0.js"></script>
<!-- 绑定回到顶部事件 -->
<script>
    $(window).scroll(function () {
        if ($(window).scrollTop() >= 1000) {
            $('#backTop').css('display', 'block');
            $('#fix').css('top','368px')
            //let n = $(window).scrollTop()
            $('#backTop').click(function () {
                //setInterval(function(){
                // n-=10;
                // if(n<=0){
                //     //clearInterval(1)
                //     n=0
                // }
                $(window).scrollTop(0)
                //},50)
            })
        }
        else {
            $('#backTop').css('display', 'none');
            $('#fix').css('top','408px')
        }
    })
</script>
<!-- 给登录绑定显示用户名事件 -->
<script src="../js/cookie.js"></script>
<script>
    let username = getCookie('username')
    let login = document.querySelector('.loginUser')
    let register = document.querySelector('.registerUser')
    //判断是否登录
    if (username /* === getCookie('username') */) {
        //登录成功显示用户名
        login.innerHTML = ` <li class="loginUser">
                    <a href="javascript:;">${username}</a>
                </li>`
        register.innerHTML = ` <li class="registerUser">
                <a href="javascript:;">退出</a>
                </li>`
        //点击退出
        register.onclick = function () {
            layer.confirm('你确定要退出吗？', { btn: ['确定', '取消'] },
                //点击弹出的确定按钮
                function () {
                    delCookie('username')
                    login.innerHTML = ` <li class="loginUser">
                    <a href="login.html">登录</a>
                </li>`
                    register.innerHTML = ` <li class="registerUser">
                <a href="register.html">注册</a>
                </li>`
                    layer.msg('退出成功', { icon: 1, time: 500 })
                    location.reload();
                },
                //点击取消的按钮，就是不退出
                function () {
                    layer.msg('已取消', { icon: 1, time: 500 })
                    return false;
                })
        }
    }
    else {
        login.innerHTML = ` <li class="loginUser">
                    <a href="login.html">登录</a>
                </li>`
    }
    //购物车里面的数量渲染
    // var params = (function () {
    //     var search = location.search;//获取location的search属性，保存在search中
    //     var params = {}; //创建空对象params
    //     if (search != "") {        //如果search不是空字符串
    //         search.slice(1).split("&").forEach( //?username=zhangdong&pwd=123456;//search去开头?，按&切割为数组，forEach
    //             function (val) {
    //                 var arr = val.split("="); //将当前元素值按=切割，保存在arr中
    //                 params[arr[0]] = arr[1];  //向params中添加一个元素,属性名为arr[0],值为arr[1]
    //             }
    //         );
    //     }
    //     return params; //返回param
    // })();
    (function (){
     let cartGoods = document.querySelector('.cartGoods');
     let cart = document.querySelector('.cart');
     let shopping = document.querySelector('.shopping')
    // cart.innerHTML = params.sum;
    for(let i=0;i<JSON.parse(localStorage.getItem('data')).length;i++){
        if(getCookie('username')==JSON.parse(localStorage.getItem('data'))[i]['username']){
            cart.innerText= Number(cart.innerText)+Number(JSON.parse(localStorage.getItem('data'))[i]['value'])
            cartGoods.style.backgroundColor='#FF6700';
            //cartGoods.style.opacity = 0.5;
            $('.cartGoods').find('a').find('span').css('color','#fff');
            $('.cartGoods').find('a').find('i').css('color','#fff');
            //购物车里面添加了商品后换图标
        shopping.className = 'iconfont icon-gouwucheman shopping font-size:20px'
        //shopping.style.fontSize = '20px !important'
        }
    }})()
</script>
<script>
     //点击购物车跳转
     $('.cartGoods').find('a').click(function(e){
        e.preventDefault();
        location.href = './cart.html'
    })
</script>
<script src="../js/image.js"></script>
<script src="../js/jump.js"></script>
<script src="../lib/layer/layer.js"></script>
<script src="../js/like.js"></script>